<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       // 源数据
        let person = {name:'小凡',age:18}

        // 模拟vue3中实现响应式

        const p = new Proxy(person,{
            // 获取属性值
            get(target,propName){
               console.log(`有人读取了p身上的${propName}属性`)

                return target[propName]
            },
            // 修改或者添加属性
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性,它的值为${value}`)

                return target[propName] = value
            },
            // 删除属性
            deleteProperty(target,propName){
                return delete target[propName]
            }
        })
    </script>
</body>
</html>